<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>窗口的大小和滚动信息(Window size and scrolling information)</title>
  <!-- 
  在JavaScript中，窗口大小和滚动信息是网页开发中常用的概念。了解浏览器窗口的大小以及文档的滚动状态对于实现响应式设计和动态布局非常重要。
  一、窗口大小
  1. 获取窗口的宽度和高度：
    - 可以使用 window.innerWidth 和 window.innerHeight 属性获取浏览器窗口的内部宽度和高度（包括滚动条，但不包括工具栏和边框）。
    const width = window.innerWidth;  // 获取窗口的宽度
    const height = window.innerHeight; // 获取窗口的高度
    console.log(`窗口宽度: ${width}px, 窗口高度: ${height}px`);
  2. 获取文档的宽度和高度：
    - 使用 document.documentElement.clientWidth 和 document.documentElement.clientHeight 可以获取文档的可视区域宽度和高度（不包括滚动条）。
    const docWidth = document.documentElement.clientWidth;  // 获取文档可视区域宽度
    const docHeight = document.documentElement.clientHeight; // 获取文档可视区域高度
    console.log(`文档可视区域宽度: ${docWidth}px, 文档可视区域高度: ${docHeight}px`);

  二、滚动信息
  1. 获取滚动位置：
    - 使用 window.scrollX 和 window.scrollY 可以获取文档在水平方向和垂直方向上的滚动距离（以像素为单位）。
    const scrollX = window.scrollX; // 获取水平滚动距离
    const scrollY = window.scrollY; // 获取垂直滚动距离
    console.log(`水平滚动距离: ${scrollX}px, 垂直滚动距离: ${scrollY}px`);
  2. 获取文档的总高度和宽度：
    - 使用 document.body.scrollWidth 和 document.body.scrollHeight 可以获取整个文档的宽度和高度，包括不可见部分。
    const totalWidth = document.body.scrollWidth;  // 获取文档总宽度
    const totalHeight = document.body.scrollHeight; // 获取文档总高度
    console.log(`文档总宽度: ${totalWidth}px, 文档总高度: ${totalHeight}px`);

  总结
  - 窗口大小：使用 window.innerWidth 和 window.innerHeight 获取浏览器窗口的大小，使用 document.documentElement.clientWidth 和 document.documentElement.clientHeight 获取文档可视区域的大小。
  - 滚动信息：使用 window.scrollX 和 window.scrollY 获取文档的滚动位置，使用 document.body.scrollWidth 和 document.body.scrollHeight 获取文档的总宽度和高度。
   -->
  <style>
    .size-scroll {
      width: 100%;
      height: 2000px;
      background-color: #f0f0f0;
      padding: 20px;
      box-sizing: border-box;
    }

    .scroll-btn {
      position: fixed;
      right: 20px;
      bottom: 30px;
      font-size: 22px;
    }
    
  </style>
</head>
<body>

  <div class="size-scroll">
    在JavaScript中，窗口大小和滚动信息是网页开发中常用的概念。了解浏览器窗口的大小以及文档的滚动状态对于实现响应式设计和动态布局非常重要。
  一、窗口大小
  1. 获取窗口的宽度和高度：
    - 可以使用 window.innerWidth 和 window.innerHeight 属性获取浏览器窗口的内部宽度和高度（包括滚动条，但不包括工具栏和边框）。
    const width = window.innerWidth;  // 获取窗口的宽度
    const height = window.innerHeight; // 获取窗口的高度
    console.log(`窗口宽度: ${width}px, 窗口高度: ${height}px`);
  2. 获取文档的宽度和高度：
    - 使用 document.documentElement.clientWidth 和 document.documentElement.clientHeight 可以获取文档的可视区域宽度和高度（不包括滚动条）。
    const docWidth = document.documentElement.clientWidth;  // 获取文档可视区域宽度
    const docHeight = document.documentElement.clientHeight; // 获取文档可视区域高度
    console.log(`文档可视区域宽度: ${docWidth}px, 文档可视区域高度: ${docHeight}px`);

  二、滚动信息
  1. 获取滚动位置：
    - 使用 window.scrollX 和 window.scrollY 可以获取文档在水平方向和垂直方向上的滚动距离（以像素为单位）。
    const scrollX = window.scrollX; // 获取水平滚动距离
    const scrollY = window.scrollY; // 获取垂直滚动距离
    console.log(`水平滚动距离: ${scrollX}px, 垂直滚动距离: ${scrollY}px`);
  2. 获取文档的总高度和宽度：
    - 使用 document.body.scrollWidth 和 document.body.scrollHeight 可以获取整个文档的宽度和高度，包括不可见部分。
    const totalWidth = document.body.scrollWidth;  // 获取文档总宽度
    const totalHeight = document.body.scrollHeight; // 获取文档总高度
    console.log(`文档总宽度: ${totalWidth}px, 文档总高度: ${totalHeight}px`);

  总结
  - 窗口大小：使用 window.innerWidth 和 window.innerHeight 获取浏览器窗口的大小，使用 document.documentElement.clientWidth 和 document.documentElement.clientHeight 获取文档可视区域的大小。
  - 滚动信息：使用 window.scrollX 和 window.scrollY 获取文档的滚动位置，使用 document.body.scrollWidth 和 document.body.scrollHeight 获取文档的总宽度和高度。
  </div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

  <button class="scroll-btn">回到顶部</button>

  <script>

    // 1. 获取窗口大小
    const windowWidth = window.innerWidth; // 获取浏览器窗口的宽度
    const windowHeight = window.innerHeight; // 获取浏览器窗口的高度
    const windowOuterWindth = window.outerWidth; // 获取浏览器窗口的外部宽度
    const windowOuterHeight = window.outerHeight; // 获取浏览器窗口的外部高度
    const windowOffsetWindth = document.documentElement.clientWidth; // 获取文档可视区域的宽度
    const windowOffsetHeight = document.documentElement.clientHeight; // 获取文档可视区域的高度
    
    console.log(`
      innerWidth浏览器窗口宽度: ${windowWidth}px, 
      innerHeight浏览器窗口高度: ${windowHeight}px`
    );
    console.log(`
      outerWidth浏览器窗口外部宽度: ${windowOuterWindth}px, 
      outerHeight浏览器窗口外部高度: ${windowOuterHeight}px`
    );
    console.log(`
      clientWidth文档可视区域宽度: ${windowOffsetWindth}px, 
      clientHeight文档可视区域高度: ${windowOffsetHeight}px`
    );

    // 2. 获取查看滚动区域
    window.onclick = function () {
      const scrollX = window.scrollX; // 获取页面水平滚动距离
      const scrollY = window.scrollY; // 获取页面垂直滚动距离
      console.log(`
        scrollX页面水平滚动距离: ${scrollX}px, 
        scrollY页面垂直滚动距离: ${scrollY}px`
      );
    }

    // 3. 滚动窗口
    // window.scrollTo(x, y); // 滚动到指定坐标
    // window.scrollTo({ top: 0, behavior: 'smooth' }); // 平滑滚动到顶部
    const scrollBtn = document.querySelector('.scroll-btn');
    scrollBtn.hidden = true
    window.onscroll = function () {
      const scrollY = window.scrollY;
      if (scrollY > 500) {
        scrollBtn.hidden = false;
      } else {
        scrollBtn.hidden = true;
      }
    }
    
    /**
      top: 指定沿 Y 轴滚动窗口或元素的像素数。
      left: 指定沿 X 轴滚动窗口或元素的像素数。
      behavior: smooth 表示平滑滚动并产生过渡效果、instant 表示滚动会直接跳转到目标位置，没有过渡效果。auto 或缺省值表示浏览器会自动选择滚动时的过渡效果。
     **/
    scrollBtn.addEventListener('click', () => {
      window.scrollTo({ top: 0, behavior: 'smooth' }); // 平滑滚动到顶部
    });

  </script>
  
</body>
</html>